<template>
  <div class="page-wrapper flex-vertical">
    <div class="app-container fill">
      <VForm :formData="formData" @submit="submit" :form="value"></VForm>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'ArticleAdd' })
import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';
import {articlesAdd, articlesDetail, articlesEdit, categorys, tagsList} from '@/api/index';
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
const router = useRouter();
const route = useRoute();
onMounted(()=>{
  tagsList().then(res=>{
    formData.value.find(i=>i.prop === 'tag_ids').bind.options = res.data.map(i=>({value:i.id,label:i.name}));
  });
  categorys().then(res=>{
    formData.value.find(i=>i.prop === 'category_id').bind.options = res.data.map(i=>({value:i.id,label:i.name}));
  })
  if(route.params.id){
    articlesDetail(route.params.id).then(res=>{
      res.data.tag_ids = res.data.tags.map(i=>i.id);
      res.data.is_homepage = res.data.is_homepage == 1?true:false;
      res.data.is_recommend = res.data.is_recommend == 1?true:false;
      res.data.is_top = res.data.is_top == 1?true:false;
      res.data.title_imgs = [res.data.files]
      value.value = res.data;
    })
  }
})
const value = ref({})
const formData = ref([
  {
    tag:'el-input',
    label:'标题',
    prop:'title',
    placeholder:'请输入',
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'VUpload',
    label:'标题图',
    prop:'title_imgs',
    placeholder:'请输入',
    bind:{
      limit:1
    },
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'el-input',
    label:'简介',
    prop:'introduction',
    placeholder:'请输入',
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'VSelect',
    label:'分类',
    prop:'category_id',
    placeholder:'请选择',
    bind:{
      options:[]
    },
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'VSelect',
    label:'标签',
    prop:'tag_ids',
    placeholder:'请输入',
    bind:{
      multiple:true,
      options:[]
    },
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'VSelect',
    label:'创作类型',
    prop:'creation_type',
    bind:{

      options:[
        {
          value:1,
          label:'原创'
        },
        {
          value:2,
          label:'转载'
        }
      ]
    },
    rules:[
      { required:true, message: '请选择', trigger: 'blur' },
    ]
  },
  {
    tag:'el-switch',
    label:'是否置顶',
    prop:'is_top',
    rules:[
      { required:false, message: '请选择', trigger: 'blur' },
    ]
  },

  {
    tag:'el-switch',
    label:'是否推荐',
    prop:'is_recommend',
    rules:[
      { required:false, message: '请选择', trigger: 'blur' },
    ]
  },
  {
    tag:'el-switch',
    label:'是否首页轮播',
    prop:'is_homepage',
    rules:[
      { required:false, message: '请选择', trigger: 'blur' },
    ]
  },
  {
    tag:'VMarkDown',
    label:'内容',
    prop:'content',
    placeholder:'请输入',
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
]);

const submit = (form)=>{
  console.log('form',form);
  let params = JSON.parse(JSON.stringify(form));
  if(params.is_homepage){
    params.is_homepage = 1;
  }else {
    params.is_homepage = 0;
  }
  if(params.is_recommend){
    params.is_recommend = 1;
  }else {
    params.is_recommend = 0;
  }
  if(params.is_top){
    params.is_top = 1;
  }else {
    params.is_top = 0;
  }
  params.html = xss.process(VueMarkdownEditor.vMdParser.themeConfig.markdownParser.render(params.content));
  params.tag_ids = params.tag_ids.join(',')
  if(params.title_imgs){
    params.title_imgs = params.title_imgs[0].id;
  }
  if(route.params.id){
    params.id = route.params.id;
  }
  let http = route.params.id ? articlesEdit : articlesAdd
  http(params).then(res=>{
    if(route.params.id){
      ElMessage.success("编辑成功");
    }else{
      ElMessage.success("创建成功");
    }

    router.push({
      name:'Article'
    })
  })
}
</script>

<style scoped>

</style>